import React, { useState, useEffect } from "react";

import {
  Input,
  Select,
  DatePicker,
  Space,
  Button,
  Table,
  Radio,
  Divider,
  message
} from "antd";
import axios from "../../model/Video";
export default function Graphic(props:any) {
  const success = () => {
    message.success('删除成功');
  };
  

  const { Option } = Select;
  const { RangePicker } = DatePicker;
  function selclassState(value: any) {
    if (value == 1) {
      type(1);
    } else if (value == 2) {
      type(2);
    } else if (value == 3) {
      type(3);
    } else {
      initList();
    }
  }
  let [keyword, setkeyword] = useState<any>("");
  let [startTime, setStartTime] = useState("");
  let [endTime, setEndTime] = useState("");
  let [list, setList] = useState<any>();
  // let [list2,setList2]=useState<any>();

  //日期格式化函数
  function formatTime(date:any) {
    var year = date.getFullYear();
    var month = date.getMonth()+1, month = month < 10 ? '0' + month : month;
    var day = date.getDate(), day =day < 10 ? '0' + day : day;
    return year + '-' + month + '-' + day;
  }
  //删除
  let del=async(id:any)=>{
    let res=await axios.del(id);
    console.log(res);
    await initList();
    success();
  }
  //日期函数
  let date = (value: any) => {
    let now = new Date();
    if (value == 0) {
      let time=formatTime(now)
      console.log(time);
      search(time);
    } else if (value == -1) {
      now.setDate(now.getDate() -1);
      let time=formatTime(now)
      console.log(time);
      search(time);
    }else if(value==-7){
      let time1=formatTime(now)
      now.setDate(now.getDate() -7);
      let time=formatTime(now)
      console.log(time);
      searchwhere(time,time1);
    }else if(value==-30){
      let time1=formatTime(now)
      now.setDate(now.getDate() -30);
      let time=formatTime(now)
      console.log(time);
      searchwhere(time,time1);
    }
  };
  //条件查询
  let searchwhere = async (value: any,value1:any) => {
    let res = await axios.query({ ShelfTime_gte: value ,ShelfTime_lte:value1});
      //上架时间大于等于value
      //gte 大于等于
      //lte 小于等于
    console.log(res.data);
    let data = new Array();
    for (let i = 0; i < res.data.length; i++) {
      let obj = {
        key: i + 1,
        name: (
          <div>
            <img
              src={res.data[i].img}
              style={{ width: "60px", marginRight: "20px" }}
            ></img>
            {res.data[i].name}
          </div>
        ),
        price: res.data[i].price,
        subscribe: res.data[i].subscribe,
        type:
          res.data[i].type == 1
            ? "已上架"
            : res.data[i].type == 2
            ? "已下架"
            : "待上架",
        ShelfTime: res.data[i].ShelfTime,
        xuid: res.data[i].xuid,
        tag: <div><Button onClick={()=>{
          console.log(res.data[i].id)
        }}>编辑</Button><Button onClick={()=>{
          console.log(res.data[i].id)
          props.history.push("/system/course/videoedit/"+res.data[i].id);
          del(res.data[i].id)
        }}>删除</Button></div>
          
       
      };
      data.push(obj);
    }
    setList(data);
  };

  //搜索
  let search = async (value: any) => {
    let res = await axios.query({ q: value });
    console.log(res.data);
    let data = new Array();
    for (let i = 0; i < res.data.length; i++) {
      let obj = {
        key: i + 1,
        name: (
          <div>
            <img
              src={res.data[i].img}
              style={{ width: "60px", marginRight: "20px" }}
            ></img>
            {res.data[i].name}
          </div>
        ),
        price: res.data[i].price,
        subscribe: res.data[i].subscribe,
        type:
          res.data[i].type == 1
            ? "已上架"
            : res.data[i].type == 2
            ? "已下架"
            : "待上架",
        ShelfTime: res.data[i].ShelfTime,
        xuid: res.data[i].xuid,
        tag: (
          <div>
            <Button onClick={()=>{
              console.log(res.data[i].id)
              props.history.push("/system/course/videoedit/"+res.data[i].id);
            }}>编辑</Button>
            <Button onClick={()=>{
              console.log(res.data[i].id)
              del(res.data[i].id)
            }}>删除</Button>
          </div>
        ),
      };
      data.push(obj);
    }
    setList(data);
  };
  let type = async (type: any) => {
    let res = await axios.query({ type: type });
    console.log(res.data);
    let data = new Array();
    for (let i = 0; i < res.data.length; i++) {
      let obj = {
        key: i + 1,
        name: (
          <div>
            <img
              src={res.data[i].img}
              style={{ width: "60px", marginRight: "20px" }}
            ></img>
            {res.data[i].name}
          </div>
        ),
        price: res.data[i].price,
        subscribe: res.data[i].subscribe,
        type:
          res.data[i].type == 1
            ? "已上架"
            : res.data[i].type == 2
            ? "已下架"
            : "待上架",
        ShelfTime: res.data[i].ShelfTime,
        xuid: res.data[i].xuid,
        tag: (
          <div>
            <Button onClick={()=>{
              console.log(res.data[i].id)
              props.history.push("/system/course/videoedit/"+res.data[i].id);
            }}>编辑</Button>
            <Button onClick={()=>{
              console.log(res.data[i].id)
              del(res.data[i].id)
            }}>删除</Button>
          </div>
        ),
      };
      data.push(obj);
    }
    setList(data);
  };
  let initList = async () => {
    let res = await axios.query({});
    console.log(res.data);
    let data = new Array();
    for (let i = 0; i < res.data.length; i++) {
      let obj = {
        key: i + 1,
        name: (
          <div>
            <img
              src={res.data[i].img}
              style={{ width: "60px", marginRight: "20px" }}
            ></img>
            {res.data[i].name}
          </div>
        ),
        price: res.data[i].price,
        subscribe: res.data[i].subscribe,
        type:
          res.data[i].type == 1
            ? "已上架"
            : res.data[i].type == 2
            ? "已下架"
            : "待上架",
        ShelfTime: res.data[i].ShelfTime,
        xuid: res.data[i].xuid,
        tag: (
          <div>
            <Button onClick={()=>{
              console.log(res.data[i].id)
              props.history.push("/system/course/videoedit/"+res.data[i].id);
            }}>编辑</Button>
            <Button onClick={()=>{
              console.log(res.data[i].id)
              del(res.data[i].id)
            }}>删除</Button>
          </div>
        ),
      };
      data.push(obj);
    }
    setList(data);
    // setList2(data);
    // console.log(data)
  };
  useEffect(() => {
    initList();
  }, []);

  //表格
  const columns = [
    {
      title: "课程信息",
      dataIndex: "name",
    },
    {
      title: "课程价格(元)",
      dataIndex: "price",
    },
    {
      title: "订阅量",
      dataIndex: "subscribe",
    },
    {
      title: "课程状态",
      dataIndex: "type",
    },
    {
      title: "上架时间",
      dataIndex: "ShelfTime",
    },
    {
      title: "排序号",
      dataIndex: "xuid",
    },
    {
      title: "操作",
      dataIndex: "tag",
    },
  ];
  const data: any = list;
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.name === "Disabled User", // Column configuration not to be checked
      name: record.name,
    }),
  };
  const [selectionType, setSelectionType] = useState<"checkbox">("checkbox");
  return (
    <div>
      <div
        className="head"
        style={{ backgroundColor: "#fff", padding: "35px" }}
      >
        <p style={{ fontSize: "22px" }}>视频课程</p>
        <hr style={{ marginBottom: "20px" }}></hr>
        <div style={{ float: "left" }}>
          <span style={{ fontSize: "18px" }}>课程状态：</span>
          <Select
            defaultValue="0"
            style={{ width: 120 }}
            onChange={selclassState}
          >
            <Option value="0">全部</Option>
            <Option value="1">已上架</Option>
            <Option value="2">已下架</Option>
            <Option value="3">待上架</Option>
          </Select>
        </div>
        <div style={{ float: "right", width: "400px" }}>
          <span style={{ fontSize: "18px" }}>课程名称：</span>
          <Input
            placeholder="请输入搜索关键词"
            id="searchinput"
            style={{ width: "240px" }}
            onChange={(e: any) => {
              setkeyword(e.target.value);
            }}
          />
        </div>
        <div style={{ clear: "both", marginTop: "70px", fontSize: "18px" }}>
          <span style={{ fontSize: "18px" }}>上架日期：</span>
          <Space direction="vertical" size={12}>
            <RangePicker
              onChange={(value: any) => {
                if (value[0]._d && value[1]._d) {
                  console.log(value[0]._d);
                  console.log(value[1]._d);
                  let date = new Date(value[0]._d);
                  let y = date.getFullYear();
                  let m: any = date.getMonth() + 1;
                  m = m < 10 ? "0" + m : m;
                  let d: any = date.getDate();
                  d = d < 10 ? "0" + d : d;
                  let starttime = y + "-" + m + "-" + d;
                  console.log(starttime);
                  date = new Date(value[1]._d);
                  y = date.getFullYear();
                  m = date.getMonth() + 1;
                  m = m < 10 ? "0" + m : m;
                  d = date.getDate();
                  d = d < 10 ? "0" + d : d;
                  let endtime = y + "-" + m + "-" + d;
                  console.log(endtime);
                  searchwhere(startTime,endTime)
                  setStartTime(value[0]._d);
                  setEndTime(value[1]._d);
                }
              }}
            />
          </Space>
          <Button
            style={{ marginLeft: "20px" }}
            onClick={() => {
              date(0);
            }}
          >
            今日
          </Button>
          <Button
            style={{ marginLeft: "20px" }}
            onClick={() => {
              date(-1);
            }}
          >
            昨日
          </Button>
          <Button
            style={{ marginLeft: "20px" }}
            onClick={() => {
              date(-7);
            }}
          >
            最近七天
          </Button>
          <Button
            style={{ marginLeft: "20px" }}
            onClick={() => {
              date(-30);
            }}
          >
            最近30天
          </Button>
          <Button
            style={{ float: "right", marginRight: "80px" }}
            onClick={() => {
              window.location.reload();
            }}
          >
            重置
          </Button>
          <Button
            type="primary"
            style={{ float: "right", marginRight: "20px" }}
            onClick={() => {
              search(keyword);
            }}
          >
            查询
          </Button>
        </div>
      </div>
      <div
        className="table"
        style={{ backgroundColor: "#fff", padding: "35px", marginTop: "20px" }}
      >
        <div>
          课程列表{" "}
          <Button type="primary" style={{ marginLeft: "980px" }} onClick={()=>{
            props.history.push("/system/course/videonewclass");
          }}>
            +新建
          </Button>
          
        </div>
        <div>
          {/* <Radio.Group
        onChange={({ target: { value } }) => {
          setSelectionType(value);
        }}
        value={selectionType}
      >
        <Radio value="checkbox">Checkbox</Radio>
        <Radio value="radio">radio</Radio>
      </Radio.Group> */}

          <Divider />

          <Table
            rowSelection={{
              type: selectionType,
              ...rowSelection,
            }}
            columns={columns}
            dataSource={data}
            pagination={{ pageSize: 6 }}
          />
        </div>
      </div>
    </div>
  );
}
